import {
  VideoCameraOutlined
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import { Link } from 'react-router-dom'
import SubMenu from 'antd/lib/menu/SubMenu';
import React, { useState } from 'react';
import { getMenuApi } from '../../apis/user'
import { eventBus } from '../../utils/eventBus';
const { Sider } = Layout;
export default function ProjectSider() {
  const [collapsed, setCollapsed] = useState(false);
  const [display, setdisplay] = useState('')
  const [data, setData] = useState([])
  React.useEffect(() => {

    eventBus.addListener("shide", function (collapsed) {
      setCollapsed(collapsed)
      console.log(setCollapsed(collapsed));
    }),

      eventBus.addListener("shide1", function (display) {
        console.log(setdisplay(display));
      }),
      getMenusetApi()
  }, [])

  const users = JSON.parse(localStorage.user)
  const userfo = users.username

  async function getMenusetApi() {
    try {
      const res = await getMenuApi(userfo)
      setData(res[0].children)
    } catch (error) {
      console.log(error)
    }

  }
  console.log(data)
  const datap = data.slice(1, 12)
  return (
    <Sider trigger={null} collapsible collapsed={collapsed}>
      <div className="logo">
        <img src="http://xawn.f3322.net:8002/distremote/static/img/logo.png" alt="" />
        <span style={{ marginLeft: "15px", display: `${display}` }}>赤兔养车</span> </div>

      <div className='pages' style={{ display: `${display}` }}>
        系统主页</div>
      <Menu
        theme="dark"
        mode="inline"
        defaultSelectedKeys={['1']}
        collapsible="true"
      >
        {
          datap.map(items => {
            return <SubMenu
              title={items.name}
              key={items.path}
              icon={<VideoCameraOutlined />}
              path={items.path}
            >
              {/* <Link to={items.path}>{items.name}</Link> */}
              {
                items.children && items.children.map(item => {
                  return <Menu.Item key={item.path} icon={<VideoCameraOutlined />}>
                    <Link to={'/home' + item.path}>{item.name}</Link>
                  </Menu.Item>
                })
              }
            </SubMenu>

          })
        }
      </Menu>
    </Sider>
  )
}
